<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" th:with="title='代理列表',active='agent',open='agent'">

<header th:replace="index/fragments/header::header-bootstrap4(${title},${active},${open})"></header>

<body class="hold-transition sidebar-mini">

    <div class="wrapper">
        <div th:replace="index/fragments/header::header-body-bootstrap4"></div>

        <!-- Content Wrapper. Contains page content -->
        <div class="content-wrapper">
            <!-- Content Header (Page header) -->
            <section class="content-header">
                <div class="container-fluid">
                    <!--         <div class="row mb-2"> -->
                    <!--           <div class="col-sm-6"> -->
                    <!--             <h1>DataTables</h1> -->
                    <!--           </div> -->
                    <!--           <div class="col-sm-6"> -->
                    <!--             <ol class="breadcrumb float-sm-right"> -->
                    <!--               <li class="breadcrumb-item"><a href="#">Home</a></li> -->
                    <!--               <li class="breadcrumb-item active">DataTables</li> -->
                    <!--             </ol> -->
                    <!--           </div> -->
                    <!--         </div> -->
                </div><!-- /.container-fluid -->
            </section>
            <div class="modal fade" id="infoModal">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h4 class="modal-title">添加</h4>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body">
                            <div class="col-md-12 column">
                                <form role="form" id="insertForm">
                                    <div class="row">
                                        <div class="form-group col-md-6">
                                            <label>代理名称</label>
                                            <input type="text" value="" name="name" placeholder=""
                                                class="form-control targetName" />
                                        </div>
                                        <div class="form-group col-md-6">
                                            <label>代理角色</label>
                                            <select class="form-control selectpicker" name="type">
                                                <option value="4" text="商户">商户</option>
                                                <option value="0" text="代理商">代理商</option>
                                                <option value="1" text="城市合伙人">城市合伙人</option>
                                                <option value="2" text="股东合伙人">股东合伙人</option>
                                                <option value="3" text="创始人">创始人</option>
                                            </select>
                                        </div>
                                    </div>


                                    <div class="row">
                                        <div class="form-group col-md-6">
                                            <label>手机号(登录账号)</label>
                                            <input type="text" value="" name="phone" placeholder=""
                                                class="form-control targetName" />
                                        </div>
                                        <div class="form-group col-md-6">
                                            <label>密码</label>
                                            <input type="password" value="" name="password" placeholder=""
                                                class="form-control targetName" />
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="form-group col-md-12">
                                            <label>上级代理</label>
                                            <select lay-search="" id="chooseGoods3"
                                                class="form-control selectpicker e-supAgentId" name="supAgentId">
                                                <option value="0" text="解绑">解绑</option>
                                                <option th:each="agent : ${agentList}" th:value="${agent.id}"
                                                    th:text="${agent.name}"> -- 请选择 --
                                                </option>
                                            </select>
                                        </div>

                                    </div>
                                    <div class="row">
                                        <div class="form-group col-md-12">
                                            <label>分成(10%为0.1)</label>
                                            <input type="number" value="" name="percent" placeholder=""
                                                class="form-control targetName" />
                                        </div>

                                    </div>

                                </form>
                            </div>
                        </div>
                        <div class="modal-footer justify-content-between">
                            <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                            <button type="button" class="btn btn-primary" onclick="insertInfo()">保存</button>
                        </div>
                    </div>
                    <!-- /.modal-content -->
                </div>
                <!-- /.modal-dialog -->
            </div>

            <div class="modal fade" id="infoModal2">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h4 class="modal-title">编辑</h4>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body">
                            <div class="col-md-12 column">
                                <form role="form" id="updateForm">
                                    <input type="hidden" value="" name="id" placeholder="" class="form-control e-id" />
                                    <div class="row">
                                        <div class="form-group col-md-6">
                                            <label>代理名称</label>
                                            <input type="text" value="" name="name" placeholder=""
                                                class="form-control e-name" />
                                        </div>
                                        <div class="form-group col-md-6">
                                            <label>代理角色</label>
                                            <select class="form-control selectpicker e-type" name="type">
                                                <option value="4" text="商户">商户</option>
                                                <option value="0" text="代理商">代理商</option>
                                                <option value="1" text="城市合伙人">城市合伙人</option>
                                                <option value="2" text="股东合伙人">股东合伙人</option>
                                                <option value="3" text="创始人">创始人</option>
                                            </select>
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="form-group col-md-6">
                                            <label>手机号(登录账号)</label>
                                            <input type="text" value="" name="phone" placeholder=""
                                                class="form-control e-phone" />
                                        </div>
                                        <div class="form-group col-md-6">
                                            <label>密码</label>
                                            <input type="password" value="" name="password" placeholder=""
                                                class="form-control e-password" />
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="form-group col-md-12">
                                            <label>上级代理</label>
                                            <select id="chooseGoods2" class="form-control selectpicker e-supAgentId"
                                                name="supAgentId">
                                                <option value="0" text="解绑">解绑</option>
                                                <option th:each="agent : ${agentList}" th:value="${agent.id}"
                                                    th:text="${agent.name}"> -- 请选择 --
                                                </option>
                                            </select>
                                        </div>

                                    </div>
                                    <div class="row">
                                        <div class="form-group col-md-12">
                                            <label>分成(10%为0.1)</label>
                                            <input type="number" value="" name="percent" placeholder=""
                                                class="form-control e-percent" />
                                        </div>

                                    </div>
                                </form>
                            </div>
                        </div>
                        <div class="modal-footer justify-content-between">
                            <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                            <button type="button" class="btn btn-primary" onclick="editInfo()">保存</button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal fade" id="infoModal3">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h4 class="modal-title">审核</h4>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body">
                            <div class="col-md-12 column">
                                <form role="form" id="checkForm">
                                    <input type="hidden" value="" name="id" placeholder="" class="form-control e-id" />
                                    <div class="row">
                                        <div class="form-group col-md-6">
                                            <label>代理名称</label>
                                            <input type="text" value="" name="name" readonly placeholder=""
                                                class="form-control e-name" />
                                        </div>
                                        <div class="form-group col-md-6">
                                            <label>代理角色</label>
                                            <select class="form-control selectpicker e-type" name="type">
                                                <option value="4" text="商户">商户</option>
                                                <option value="0" text="代理商">代理商</option>
                                                <option value="1" text="城市合伙人">城市合伙人</option>
                                                <option value="2" text="股东合伙人">股东合伙人</option>
                                                <option value="3" text="创始人">创始人</option>
                                            </select>
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="form-group col-md-6">
                                            <label>手机号(登录账号)</label>
                                            <input type="text" value="" name="phone" readonly placeholder=""
                                                class="form-control e-phone" />
                                        </div>
                                        <div class="form-group col-md-6">
                                            <label>密码</label>
                                            <input type="password" value="" name="password" placeholder=""
                                                class="form-control e-password" />
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="form-group col-md-12">
                                            <label>上级代理</label>
                                            <select lay-search="" id="chooseGoods4"
                                                    class="form-control selectpicker e-supAgentId" name="supAgentId">
                                                <option value="0" text="解绑">解绑</option>
                                                <option th:each="agent : ${agentList}" th:value="${agent.id}"
                                                        th:text="${agent.name}"> -- 请选择 --
                                                </option>
                                            </select>
                                        </div>

                                    </div>
                                    <div class="row">
                                        <div class="form-group col-md-12">
                                            <label>分成(10%为0.1)</label>
                                            <input type="number" value="" name="percent" placeholder=""
                                                class="form-control e-percent" />
                                        </div>

                                    </div>
                                    <div class="row">
                                        <div class="form-group col-md-12">
                                            <label>凭证</label>
                                            <image src="" placeholder="" style="height: auto"
                                                class="form-control e-remark" />
                                        </div>

                                    </div>
                                </form>
                            </div>
                        </div>
                        <div class="modal-footer justify-content-between">
                            <button type="button" class="btn btn-default" onclick="cancelInfo()">拒绝</button>
                            <button type="button" class="btn btn-primary" onclick="agreeInfo()">通过</button>
                        </div>
                    </div>
                </div>
            </div>
            <!-- Main content -->
            <section class="content">


                <div class="container-fluid">

                    <div class="row">
                        <div class="col-12">

                            <div class="card">
                                <div class="card-body">
                                    <table id="example" class="table table-bordered table-hover">
                                        <thead>
                                            <tr>
                                                <th>ID</th>
                                                <th>名称</th>
                                                <th>手机号</th>
                                                <th>上级代理</th>
                                                <th>层级</th>
                                                <th>余额</th>
                                                <th>分成</th>
                                                <th>状态</th>
                                                <th>角色</th>
                                                <th>创建时间</th>
                                                <th>操作</th>
                                            </tr>
                                        </thead>
                                        <tbody>

                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </div>
    </div>

    <div th:replace="index/fragments/footer :: footer"></div>
    <script>
        // Usage
        // layui.use(function(){
        //     var layer = layui.layer;
        //     // Welcome
        //     layer.msg('Hello World', {icon: 6});
        // });
        // $.fn.dataTable.ext.buttons.printSku = {
        //     className: 'new-buttons bg-primary',
        //
        //     action: function (e, dt, node, config) {
        //         console.log('print')
        //         printSku();
        //     }
        // };
        $.fn.dataTable.ext.buttons.insert = {
            className: 'new-buttons bg-info',
            action: function (e, dt, node, config) {
                $('#infoModal').modal('show')
            }
        }

        // Datatable
        let table = $('#example').DataTable({
            "paging": true,
            "lengthChange": false,
            "searching": true,
            "ordering": false,
            "info": true,
            "autoWidth": false,
            "responsive": true,
            "ajax": {
                "url": "/admin/agent/list",
                "dataSrc": "data",//这里是后台返回的数据对象
                "data": function (d) {
                    let param = {};//因为服务端排序，可以新建一个参数对象

                    //                 param.start = d.start;//开始的序号
                    //                 param.length = d.length;//要取的数据的条数
                    return param;//自定义需要传递的参数。
                }
            },
            dom: 'Bfrtip',
            buttons: [
                {
                    extend: 'insert',
                    text: '添加',
                },

            ],
            //         "createdRow": function (row, data, index) {
            //             /* 设置表格中的内容居中 */
            //             $('td', row).attr("class", "text-center");
            //         },
            //定义列: 取相应属性字段<th>ID</th>
            "columns": [
                // {
                //     "data": null,
                //     "render": function (data, type, row) {
                //         return data = '<input id="check-' + row.id + '"  class="checkOne" name="check" type="checkbox" onClick="add_Goods(this)" />'
                //     },
                //
                // },
                {
                    "data": "id",
                },
                { "data": "name" },
                { "data": "phone" },
                { "data": "supAgentName" },
                { "data": "nodeLevel" },
                { "data": "balance" },
                { "data": "percent" },
                {
                    "data": "status",
                    "render": function (data, type, row, meta) {
                        if (data == 1) {
                            return '<span class="badge bg-primary">待审核</span>';
                        } else if (data == 2) {
                            return '<span class="badge bg-success">已通过</span>';
                        }
                    }
                },
                {
                    "data": "type",
                    "render": function (data, type, row, callback) {
                        //类型：0导航菜单；1操作按钮。
                        if (data == 0 && row.level == 0) {
                            return '<span class="badge bg-primary">代理商</span>';
                        } else if (data == 1) {
                            return '<span class="badge bg-primary">城市合伙人</span>';
                        } else if (data == 2) {
                            return '<span class="badge bg-primary">股东合伙人</span>';
                        } else if (data == 3) {
                            return '<span class="badge bg-primary">创始人</span>';
                        } else if (row.level == 1) {
                            return '<span class="badge bg-success">商户</span>';
                        }
                    }
                },
                {
                    "data": "createTime",
                },
                //操作列
                {
                    "data": "id",
                    "render": function (data, type, row, meta) {
                        let statusBtn = '<a class="btn btn-render btn-info" data-toggle="modal" data-target="#infoModal3" onclick="getInfo(\'' + data + '\');" >审核</a>'
                        let updateBtn = '<a class="btn btn-render btn-success" data-toggle="modal" data-target="#infoModal2" onclick="getInfo(\'' + data + '\');" >编辑</a>'
                        let deleteBtn = '<a class="btn btn-render btn-danger" onclick="deleteTarget(\'' + data + '\');" >删除</a>'
                        if (row.status == 1) {
                            return (statusBtn + deleteBtn);
                        } else {
                            return (updateBtn + deleteBtn);
                        }
                    }
                }
            ],
            // columnDefs: [
            //
            //     {
            //         targets: 0,//代表第0行
            //         searchable: false,
            //         orderable: false,
            //         className: '',
            //         render: function (data, type, row) {
            //             return '<input class="checkchild" type="checkbox"/>';
            //         }
            //     }],
            // select: {
            //     style: 'multi',
            //     selector: 'td:first-child'
            // },
            // select: true,
            "language": {
                "lengthMenu": "每页 _MENU_ 条记录",
                "zeroRecords": " ",
                "info": "当前 _START_ 条到 _END_ 条 共 _TOTAL_ 条",
                "infoEmpty": "无记录",
                "infoFiltered": "(从 _MAX_ 条记录过滤)",
                "search": "搜索",
                "processing": "载入中",
                "paginate": {
                    "first": "首页",
                    "previous": "上一页",
                    "next": "下一页",
                    "last": "尾页"
                }
            },
        });

        table.buttons().container().appendTo($('.dataTables_filter', table.table().container()));
        let ids = '';

        $(document).on("click", ".checkAll", function () {
            //prop是修改和读取dom原始属性的值
            // alert($(this).prop("checked"));   //$(this).prop("checked") 返回值为true和false
            $(".checkOne").prop("checked", $(this).prop("checked"));
            let checkOne = {}; //存放全选选中数据

            if ($(this).prop("checked")) {

                $(".checkOne").prop("checked", true).each(function (i) {
                    // console.log($(".checkOne")[i].id)
                    let idStr = $(".checkOne")[i].id;
                    let id = idStr.slice(6)
                    ids += id + ',';
                });
            } else {
                //取消全选，直接把值设置为空
                ids = "";
            }
            console.log(ids)
        });

        //获得单选，选中数据
        function add_Goods(_this) {
            let nRow = $(_this).parents('tr')[0];//得到这一行
            let aData = table.row(nRow).data();//得到这一行的json数据
            let txt = aData;
            if (_this.checked) {
                ids += txt.id + ',';

            } else {
                //当取消选中,把参数设置为空
                ids = ids.replace(txt.id + ',', "");
            }
            if (ids.length == 0) {
                $(".checkAll").prop("checked", false);
            }
            console.log(ids)
        }

        // 监听modal
        $("#infoModal2").on("hidden.bs.modal", function () {
            $('.targetId').val(0)
            $('.targetName').val('')
            $('.targetBalance').val('');
            $('.targetPrice').val(0)
        });


        // 用户信息
        function getInfo(id) {
            tale.get({
                url: '/admin/agent/info',
                data: {
                    id: id
                },
                success: function (res) {
                    let data = res.data
                    let dataName = Object.keys(data);
                    $('.e-remark').attr('src', data.remark)
                    for (let k in dataName) {
                        // console.log('.p-' + dataName[k] + ',' + data[dataName[k]])
                        $('.e-' + dataName[k]).val(data[dataName[k]])
                        console.log('.e-' + dataName[k])
                    }
                }
            })
        }

        function insertInfo() {
            let data = $('#insertForm').serializeArray()
            console.log(data)
            if (data[0].value == '') {
                Toast.fire({
                    icon: 'error',
                    title: '请设置名称'
                })
                return;
            }
            if (data[2].value == '') {
                Toast.fire({
                    icon: 'error',
                    title: '请设置手机号'
                })
                return;
            }
            if (data[3].value == '') {
                Toast.fire({
                    icon: 'error',
                    title: '请设置密码'
                })
                return;
            }
            if (data[5].value <= 0) {
                Toast.fire({
                    icon: 'error',
                    title: '请设置分成比例'
                })
                return;
            }
            Confirm.fire({
                title: '确认保存?',
                preConfirm: function () {
                    tale.post({
                        url: '/admin/agent/insert',
                        data: data,
                        success: function (result) {
                            if (result.code == 200) {
                                Toast.fire({
                                    icon: 'success',
                                    title: '操作成功'
                                })
                                $('#infoModal').modal('hide');
                                table.ajax.reload(null, false)
                            } else {
                                Toast.fire({
                                    icon: 'error',
                                    title: result.msg || '操作失败'
                                })
                            }
                        },
                        error: function (e) {
                            Toast.fire({
                                icon: 'error',
                                title: e.msg || '操作失败'
                            })
                        }
                    })
                }
            })
        }
        function cancelInfo() {
            let data = $('#checkForm').serializeArray()
            let id = data[0].value
            Confirm.fire({
                title: '确认驳回？',
                preConfirm: function () {
                    tale.post({
                        url: '/admin/agent/delete',
                        data: { id: id },
                        success: function (result) {
                            if (result.code == 200) {
                                Toast.fire({
                                    icon: 'success',
                                    title: '操作成功'
                                })
                                $('#infoModal3').modal('hide');
                                table.ajax.reload(null, false)
                            } else {
                                Toast.fire({
                                    icon: 'error',
                                    title: result.msg || '操作失败'
                                })
                            }
                        },
                        error: function (e) {
                            Toast.fire({
                                icon: 'error',
                                title: e.msg || '操作失败'
                            })
                        }
                    });
                }
            })
        }
        function agreeInfo() {
            let data = $('#checkForm').serializeArray()
            let status = {
                name: 'status',
                value: '2'
            }
            data.push(status);
            if (data[4].value == '') {
                Toast.fire({
                    icon: 'error',
                    title: '请设置密码'
                })
                return;
            }
            if (data[6].value <= 0) {
                Toast.fire({
                    icon: 'error',
                    title: '请设置分成比例'
                })
                return;
            }
            Confirm.fire({
                title: '确认审核通过?',
                preConfirm: function () {
                    tale.post({
                        url: '/admin/agent/update',
                        data: data,
                        success: function (result) {
                            if (result.code == 200) {
                                Toast.fire({
                                    icon: 'success',
                                    title: '操作成功'
                                })
                                $('#infoModal3').modal('hide');
                                table.ajax.reload(null, false)
                            } else {
                                Toast.fire({
                                    icon: 'error',
                                    title: result.msg || '操作失败'
                                })
                            }
                        },
                        error: function (e) {
                            Toast.fire({
                                icon: 'error',
                                title: e.msg || '操作失败'
                            })
                        }
                    })
                }
            })
        }
        // 修改信息
        function editInfo() {
            let data = $('#updateForm').serializeArray()

            if (data[6].value <= 0) {
                Toast.fire({
                    icon: 'error',
                    title: '请设置分成比例'
                })
                return;
            }
            // console.log(data)
            Confirm.fire({
                title: '确认保存?',
                preConfirm: function () {
                    tale.post({
                        url: '/admin/agent/update',
                        data: data,
                        success: function (result) {
                            if (result.code == 200) {
                                Toast.fire({
                                    icon: 'success',
                                    title: '操作成功'
                                })
                                $('#infoModal2').modal('hide');
                                table.ajax.reload(null, false)
                            } else {
                                Toast.fire({
                                    icon: 'error',
                                    title: result.msg || '操作失败'
                                })
                            }
                        },
                        error: function (e) {
                            Toast.fire({
                                icon: 'error',
                                title: e.msg || '操作失败'
                            })
                        }
                    })
                }
            })
        }

        // 变更状态
        function updateStatus(id) {
            Confirm.fire({
                title: '确认处理？',
                preConfirm: function () {
                    tale.post({
                        url: '/admin/agent/check',
                        data: {
                            id: id,
                        },
                        success: function (result) {
                            if (result.code == 200) {

                                Toast.fire({
                                    icon: 'success',
                                    title: '操作成功'
                                })
                                $('#infoModal2').modal('hide');
                                table.ajax.reload(null, false)
                            } else {
                                Toast.fire({
                                    icon: 'error',
                                    title: result.msg || '操作失败'
                                })
                            }
                        },
                        error: function (e) {
                            Toast.fire({
                                icon: 'error',
                                title: e.msg || '操作失败'
                            })
                        }
                    })
                }
            })


        }

        //删除
        function deleteTarget(id) {
            Confirm.fire({
                title: '确认删除？',
                preConfirm: function () {
                    tale.post({
                        url: '/admin/agent/delete',
                        data: { id: id },
                        success: function (result) {
                            if (result.code == 200) {
                                Toast.fire({
                                    icon: 'success',
                                    title: '操作成功'
                                })
                                table.ajax.reload(null, false)
                            } else {
                                Toast.fire({
                                    icon: 'error',
                                    title: result.msg || '操作失败'
                                })
                            }
                        },
                        error: function (e) {
                            Toast.fire({
                                icon: 'error',
                                title: e.msg || '操作失败'
                            })
                        }
                    });
                }
            })


        }
    </script>
</body>

</html>